<template>
    <div id="app" v-wechat-title="$route.meta.title">
        <div class="view-blank">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive && isRouterAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive && isRouterAlive"></router-view>
        </div>
        <div class="keyboard-blank"></div>
    </div>
</template>
<script lang="ts">
    import {Component, Vue, Watch, Provide} from "vue-property-decorator";
    import {State, Action} from "vuex-class";
    import Scene from "@/render/Scene";
    import CommonUnit from "@/unit/CommonUnit";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import Http from "@/service/Http";

    @Component({})
    export default class App extends Scene {
        private isRouterAlive: boolean = true;

        @State("UserStore")
        private user!: InterfaceUser;

        @Provide("reload")
        private reload(): void {
            this.isRouterAlive = false;
            this.$nextTick(() => {
                this.isRouterAlive = true;
            });
        }

        private mounted() {

        }

        private created() {
            let query = this.getRequest(window.location.search);
            if (query.share) {
                window.location.replace(`${window.location.origin}${(<any> this).$router.options.base || ""}#/share?id=${query.share}&url=${encodeURIComponent(query.url)}`);
            } else {
                this.authentication();
            }
        }

        private getRequest(str: string): any {
            let query: any = {};
            if (str.indexOf("?") != -1) {
                str = str.substr(1);
                let queryList: any = str.split("&");
                for (let i = 0; i < queryList.length; i++) {
                    query[(queryList as any)[i].split("=")[0]] = unescape(queryList[i].split("=")[1]);
                }
            }
            return query;
        }
    }

</script>

<style lang="stylus">
    @font-face {
        font-family: "lovely";
        src: url('/assets/fonts/lovely/lovely.TTF') /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    }

    @font-face {
        font-family: "girl";
        src: url('/assets/fonts/girl/girl.ttf') /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    }

    @import "/components/aui/style/compatible-safe-area.styl"

    body.girls-model, html.girls-model
        font-family girl

    #app
        overflow hidden;
        height 100vh;
        width 100vw;
        display flex;
        flex-direction column;

        #mapBackground
            opacity 0;
            height 0;
            width 0;

    .view-blank
        flex 1;
        display block;
        position relative;


    .keyboard-blank
        /*height 242px;*/
        /*flex 0 0 242px;*/
        width 100vw;

    .socket-preview
        position absolute;
        left 12px;
        right 12px;
        top calc(6px + var(--safe-area-inset-top));
        height 55px;
        background #fff;
        z-index 201;
        display flex;
        border-radius 5px;
        box-shadow rgba(210, 210, 210, .2) 0 0 10px 10px;
        justify-content center;
        align-items center;
        transform translateY(calc(-61px - var(--safe-area-inset-top))) scale(0)
        transition transform .3s ease-in-out;
        border 1px solid rgba(210, 210, 210, .5);

        .socket-preview-icon
            width 25px;
            height 25px;

            .socket-preview-svg
                width 25px;
                height 25px;


        .socket-preview-context
            padding-left 12px;
            display flex;
            flex-direction column;

    .socket-preview-show
        transform translateY(0) scale(1)


</style>
<style lang="stylus">
    @import "./assets/fonts/iconfont/iconfont.css";
    @import "~animate.css/animate.min.css"

    .svg-icon
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;

    #app
        font-size 14px;
        min-height 100vh;
        position relative;
        background-color rgba(255, 255, 255, 0);

    div, p, textarea
        box-sizing border-box

    img
        content: normal !important;

    input, textarea
        outline: none;

    .ellipsis
        overflow hidden
        text-overflow ellipsis;
        white-space nowrap

    .ellipsis-2
        text-overflow ellipsis;
        overflow hidden;
        display -webkit-box;
        -webkit-box-orient vertical;
        -webkit-line-clamp 2;

    .clearfix
        &::before, &::after
            content '';
            display block;
            height 0;
            clear both;
            visibility hidden;


    //禁用默认的下拉刷新和边界效果,但是依然可以进行滑动导航
    body
        overscroll-behavior-y none;

    //全局无数据样式
    .no-data
        height 50px;
        font-size 13px;
        text-align center;
        line-height 50px;


    .amap-copyright
        display none !important;

    //全局flex布局
    .flex
        display flex;

    //左右浮动
    .rt
        float right;

    .lf
        float left;

    .hidden
        display none;

    .show
        display block !important;

    //骨架屏全局样式
    .skeleton-preview
        padding var(--safe-area-inset-top) 0 0 0;
        width 100vw;
        height 100vh;
        position absolute;
        z-index 112;

        img
            width 100vw;
            height calc(100vh - var(--safe-area-inset-top));


    .decimal-point
        font-size .8em;

    .mosaic
        filter: blur(20px);

    .scroll-safe-area-bottom
        height var(--safe-area-inset-bottom);
        width 100%;
        overflow hidden;
        background rgba(255, 255, 255, 0);


</style>

<style lang="stylus">
    .prefetch-font
        position absolute;
        left -100vw;
        bottom 100vw;

        .lovely-font
            font-family lovely;

        .girl-font
            font-family girl;

    .share-controller
        overflow hidden;
        z-index 400;
        position absolute;
        width 100vw;
        height 0;
        top 0;
        left 0;
        opacity 0;

        .share-mask
            width 100vw;
            height 100vh;
            background rgba(0, 0, 0, 0)
            transition background .3s ease-in-out

        .share-content
            width 100vw;
            position absolute;
            bottom 0;
            transform translateY(100%)
            transition transform .3s ease-in-out

            .share-title
                height: 40px;
                display flex;
                justify-content center;
                align-items center
                border-top-right-radius 10px;
                border-top-left-radius 10px;
                background rgba(232, 232, 232, .9);
                color #767676;

            .share-list
                padding-bottom 10px;
                display flex;
                background rgba(232, 232, 232, .9)

                .share-list-cell
                    width 57px;
                    margin 15px 0 10px 12px;

                    .share-list-cell-icon, .share-list-cell-text
                        display flex;
                        justify-content center;
                        align-items center

                    .share-list-cell-icon
                        font-size 42px;
                        height: 57px;
                        width 57px;
                        background #fff;
                        border-radius 10px;

                    .share-list-cell-text
                        height 30px;
                        font-size 12px;
                        margin-top 5px;

            .share-cancel
                height calc(57px + var(--safe-area-inset-bottom));
                padding-bottom var(--safe-area-inset-bottom);
                width 100vw;
                background #fff;
                display flex;
                justify-content center;
                align-items center;
                font-size 15px;
                color #333;

    .share-controller-show
        height 100vh;
        opacity 1;

        .share-mask
            background rgba(0, 0, 0, .3)

        .share-content
            transform translateY(0)

    .full-screen-gifts
        position absolute;
        background rgba(0, 0, 0, .3);
        width 100vw;
        height 100vh;
        z-index 500;
        display flex;
        flex-direction column;
        justify-content center;
        align-items center

        .full-screen-gift-img
            width 50vw;
            height auto;

            img
                width 50vw;
                height auto;

        .full-screen-gift-text
            line-height 2;
            font-size 19px;
            color #fff;
            margin-top 20px;

        .full-screen-gift-from
            margin-top 20px;
            line-height 1.77;
            padding 0 20px;
            color #fff;

        .full-screen-gift-close
            width 30px;
            height 30px;
            border-radius 30px;
            margin-top 40px;
            display flex;
            align-items center;
            color #fff;
            font-size 30px;
            justify-content center;


    .product-item
        display flex;
        flex-direction column;
        width calc(100% - 15px);
        margin-right 15px;
        position relative;
        padding-bottom 15px;
        margin-bottom 20px;
        background #fff;
        border-radius 5px;
        overflow hidden;

        .product-item-img
            width 100%;
            height calc(48vw - 15px);
            border-radius 3px;
            overflow hidden;
            display flex
            justify-content center;
            align-items center;

            img
                max-width calc(48vw - 15px);
                width auto;
                max-height calc(48vw - 15px);
                height auto;

        .product-item-title
            margin 5px 0;
            line-height 20px;
            padding 0 5px;
            max-height 40px;
            font-size 13px;

        .product-item-price
            display flex;
            align-items center;
            justify-content space-between;
            padding 0 5px;
            font-size 11px;


            .product-item-price-box
                span
                    &::before
                        content '￥'
                        margin-right -2px;
                        font-size 10px;

                .now-price
                    color $product-price-color;
                    font-size 14px;

                .line-price
                    padding-left 4px;
                    color #aaa;
                    text-decoration line-through;
                    font-size 10px

            .product-item-sale
                color #666
                font-size 8px
</style>

<!--dialog自定义插槽样式-->
<style lang="stylus">
    .face-needing-title-img
        width 72vw;
        background-image url("/assets/images/face-upload-needing.png");
        background-size cover;
        height 52vw;
        line-height 1.5

    .face-needing-content
        text-align: center;
        line-height 1.3
</style>
